<template>
  <div>
    <div class="pay" v-if="toShows1">
      <van-nav-bar style="z-index: 999;position: relative;" :placeholder=true fixed title="新增信息" left-arrow
        @click-left="toShows1 = false" />
      <div class="allBuy">
        <div class="iptBox">
          <p class="title">姓名 / 参赛昵称</p>
          <p class="engTit">Name / Stage Name</p>
          <van-field style="border-radius: .35rem;background: #2a2c45;" v-model="addUsers.name"
            placeholder="Enter Your name." />
        </div>
        <div class="iptBox">
          <p class="title">战队名称（选填）</p>
          <p class="engTit">Crew Name(Optional)</p>
          <van-field style="border-radius: .35rem;background: #2a2c45;" v-model="addUsers.teamName"
            placeholder="Routine or Crew battle participants Only" />
        </div>
        <div class="iptBox">
          <p class="title">手机号</p>
          <p class="engTit">phone number</p>
          <van-field style="border-radius: .35rem;background: #2a2c45;" v-model="addUsers.mobile"
            placeholder="Enter your phone number" />
        </div>
        <div class="iptBox">
          <p class="title">所属机构(选填)</p>
          <p class="engTit">Organization (Optional)</p>
          <van-field style="border-radius: .35rem;background: #2a2c45;" v-model="addUsers.organizationName"
            placeholder="Enter the studio or crew you represent" />
        </div>
        <div class="iptBox">
          <p class="title">出生日期</p>
          <p class="engTit">birthday</p>
          <van-field @click="toShow(0)" disabled style="border-radius: .35rem;background: #2a2c45;"
            v-model="addUsers.birthday" placeholder="Enter Your name." />
        </div>
        <div class="iptBox">
          <p class="title">性别</p>
          <p class="engTit">Gender</p>
          <van-field @click="toShow(1)" disabled style="border-radius: .35rem;background: #2a2c45;"
            v-model="addUsers.gender" placeholder="Enter Your name." />
        </div>
        <div class="iptBox">
          <p class="title">地区</p>
          <p class="engTit">Region</p>
          <van-field @click="toShow(2)" disabled style="border-radius: .35rem;background: #2a2c45;"
            v-model="addUsers.province + ' ' + addUsers.city" placeholder="Enter Your name." />
        </div>
        <div class="iptBox">
          <p class="title">备注</p>
          <p class="engTit">Note</p>
          <van-field style="border-radius: .35rem;background: #2a2c45;" v-model="addUsers.name"
            placeholder="Enter Your name." />
        </div>
      </div>
      <div class="userBtmBtn">
        <van-button v-if="addUserId" style="border-radius: .3rem;width: 48%;" color="#2a2c45" icon='delete-o'
          @click="deleteUser">删除</van-button>
        <van-button :style="{ borderRadius: '.3rem', width: addUserId ? '48%' : '100%' }"
          color="linear-gradient(to right, #575cfe, #5e80ff)" icon='success' @click="sureAddUser">确定</van-button>
      </div>
      <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
        <van-datetime-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" v-if="popNum == 0" type="date"
          title="选择年月" @confirm="confirmTime" @cancel="show = false" />
        <van-picker v-if="popNum == 1" show-toolbar :columns="columns" @confirm="confirmGender" @cancel="show = false" />
        <van-area v-if="popNum == 2" :columns-num="2" @confirm="confirmArea" :area-list="areaList" />
        <!-- <div style="width: 100%;text-align: center;">
        <van-button style="width:2rem;margin-right: .6rem;" @click="show = false">取消</van-button>
        <van-button style="width:2rem;" type="primary" @click="show = false">确定</van-button>
      </div> -->
      </van-popup>
    </div>
    <div class="chosePeople" v-else>
      <van-nav-bar style="z-index: 999;position: relative;" :placeholder=true fixed title="选择购票人" left-arrow
        @click-left="$router.go(-1)" />
      <div class="peopleList">
        <template v-for="(item, index) in userList">
          <div class="choseBox" :key="index">
            <div class="peopleInfo" @click="chosePeople(item, index)">
              <div class="surePeople" :style="{background:choseUserList.findIndex(el => el === item.id)==-1?'#484869':'linear-gradient(to right, #575cfe, #5e80ff)',color:choseUserList.findIndex(el => el === item.id)==-1?'':'#fff'}">
                <van-icon name="success" />
              </div>
              <p style="color:#e8ebed;font-size: .3rem;margin-right: .2rem;">{{ item.name }}</p>
              <p style="font-size: .25rem;line-height: .45rem;">{{ item.mobile }}</p>
            </div>
            <div class="editRig" @click="addPeople(true, index)">
              <van-icon name="edit" />
            </div>
          </div>
        </template>
      </div>
      <div class="peopleBtn">
        <van-button color="#2a2c45" style="border-radius:.25rem;width: 48%;margin-right: .2rem;" icon='plus'
          @click="addPeople(false, 0)">新增</van-button>
        <van-button color="linear-gradient(to right, #575cfe, #5e80ff)" style="border-radius:.25rem;width: 48%;"
          @click="toConfirm">下一步</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';
export default {
  name: 'PayIndex',
  data() {
    return {
      toShows1: false,
      birthday: '',
      addUsers: {
        name: "",
        mobile: "",
        teamName: "",
        gender: "",
        birthday: "",
        province: "",
        city: "",
        cardNo: "",
        idCardName: "",
        organizationName: ""
      },
      show: false,
      popNum: 0,
      columns: ['男', '女'],
      addUserId: '',
      areaList,
      userList: [],
      currentDate: new Date(2000),
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2030, 1, 1),
      choseUserList: []
    }
  },
  computed: {

  },
  methods: {
    confirmTime(value) {
      this.addUsers.birthday = this.$dayjs(value).format('YYYY-MM-DD')
      this.show = false
    },
    confirmGender(value) {
      this.addUsers.gender = value
      this.show = false
    },
    confirmArea(value) {
      this.addUsers.province = value[0].name
      this.addUsers.city = value[1].name
      this.show = false
    },
    toConfirm() {
      if(!this.choseUserList.length) return this.$toast('请选择购票人');
      this.$router.push({
        path: '/confirmOrder',
        query: {
        }
      })
    },
    sureAddUser() {
      if (!this.addUsers.name) {
        this.$toast('姓名不能为空');
        return
      }
      if (!this.addUsers.mobile) {
        this.$toast("手机号码不能为空")
        return
      }
      const mobileRegex = /^1[3456789]\d{9}$/;
      if (!mobileRegex.test(this.addUsers.mobile)) {
        this.$toast("手机号码格式不正确")
        return
      }
      if (!this.addUsers.gender) {
        this.$toast("请选择性别")
        return
      }
      if (!this.addUsers.birthday) {
        this.$toast("生日不能为空")
        return
      }
      if (!this.addUsers.province) {
        this.$toast("省份不能为空")
        return
      }
      if (!this.addUsers.city) {
        this.$toast("城市不能为空")
        return
      }
      if (this.addUserId) {
        this.$axios.put(`front/userReal/${this.addUserId}`, this.addUsers).then((res) => {
          this.$toast.success('编辑成功');
          this.getBuyUsers()
        });
      } else {
        this.$axios.post(`front/userReal`, this.addUsers).then((res) => {
          this.$toast.success('添加成功');
          this.getBuyUsers()
        });
      }
    },
    deleteUser() {
      this.$axios.delete(`front/userReal/${this.addUserId}`).then((res) => {
        this.$toast.success('删除');
        this.getBuyUsers()
      });
    },
    addPeople(val, ind) {
      if (val) {
        this.addUsers = this.userList[ind]
        this.addUsers.birthday = this.$dayjs(this.addUsers.birthday).format('YYYY-MM-DD')
        this.addUserId = this.userList[ind].id
        this.toShows1 = true
      } else {
        this.addUsers = {
          name: "",
          mobile: "",
          teamName: "",
          gender: "",
          birthday: "",
          province: "",
          city: "",
          cardNo: "",
          idCardName: "",
          organizationName: ""
        }
        this.addUserId = null
        this.toShows1 = true
      }
    },
    chosePeople(peo, i) {
      const index = this.choseUserList.findIndex(el => el === peo.id);
      if (index !== -1) {
        this.choseUserList.splice(index, 1);
      } else {
        this.choseUserList.push(peo.id);
      }
    },
    toShow(val) {
      this.show = true
      if (val == 0) {
        this.currentDate = new Date(this.addUsers.birthday)
      }
      this.popNum = val
    },
    getBuyUsers() {
      this.$axios.get(`front/userReal`).then((res) => {
        this.userList = res.result
        this.toShows1 = false
      });
    }
  },
  async created() {
    await this.getBuyUsers()
  }
}
</script>

<style lang="less" scoped>
.userBtmBtn {
  position: fixed;
  bottom: 0.5rem;
  left: 50%;
  transform: translate(-50%, 0);
  width: 90%;
  display: flex;
  justify-content: space-between;
}

::v-deep .van-field__control {
  color: #fff;
}

.chosePeople {
  min-height: 100vh;

  .peopleBtn {
    width: 95%;
    margin: auto;
    justify-content: space-between;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
  }

  .peopleList {
    width: 100%;
    margin-top: .3rem;
  }

  .choseBox {
    background: #2a2c45;
    overflow: hidden;
    color: #8789a0;
    display: flex;
    align-items: center;
    margin: 0 auto .3rem;
    border-radius: .3rem;
    justify-content: space-between;
    width: 90%;

    .editRig {
      background: #30304a;
      font-size: .6rem;
      padding: .1rem .2rem .1rem;
    }
  }
}

.peopleInfo {
  display: flex;
  justify-content: space-between;
}

.surePeople {
  width: .45rem;
  height: .45rem;
  font-size: .4rem;
  border-radius: .25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #484869;
  margin-right: .2rem;
  margin-left: .2rem;

  p {
    line-height: .5rem;
  }
}

.pay {
  height: 14.5rem;
  overflow-y: auto
}

.allBuy {
  min-height: 100vh;
  color: #fff;
  padding: .25rem;

}

.iptBox {
  width: 100%;
  margin-bottom: .3rem;

  .title {
    font-size: .36rem;
    margin-bottom: .12rem;
  }

  .engTit {
    font-size: .23rem;
    margin-bottom: .14rem;
  }
}
</style>
